<template>
    <div class="app-container">
        <div class="head">
            <img src="@/assets/img/Layout/position.png" />
            <p class="see-block">收款单详情</p>
        </div>
        <div class="view-container">
            <el-row class="status-title">
                <!-- <el-col class="mr20 width100" v-if="detailData.status == '1'">
                    <el-button
                        class="btn-default width100"
                        type="primary"
                        @click="edit()"
                        v-hasPermi="['system:billsMakeCollections:update']"
                    >编辑</el-button>
                </el-col> -->
                <el-col class="mr20 width100" v-if="detailData.status == '1'">
                    <el-button
                        class="btn-default width100"
                        type="primary"
                        @click="confirm()"
                        v-hasPermi="['system:billsMakeCollections:audit']"
                    >确认收款</el-button>
                </el-col>
                <!-- <el-col class="mr20 width100" v-if="detailData.status == '2'">
                    <el-button
                        class="btn-default width100"
                        type="primary"
                        @click="cancel()"
                        v-hasPermi="['system:billsMakeCollections:audit']"
                    >撤消收款</el-button>
                </el-col> -->
                <el-col :span="10" class="status-container">
                    <div class="status-item">
                        <span :class="{ 'active' : detailData.status == '1'}">待收款</span>
                        <span :class="{ 'active' : detailData.status == '2'}">已收款</span>
                        <span :class="{ 'active' : detailData.status == '3'}">部分核销</span>
                        <span :class="{ 'active' : detailData.status == '4'}">已核销</span>
                    </div>
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="8">
                    <span>单据编号：</span>{{ detailData.collectionCode ?  detailData.collectionCode : '暂无'}}
                </el-col>
                <el-col :span="8">
                    <span>客户：</span>{{ detailData.customerName ?  detailData.customerName : '暂无'}}
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="8">
                    <span>收款方式：</span>{{ detailData.collectionMethod == '1' ? '银行' :  detailData.collectionMethod == '2' ? '现金' : '暂无'}}
                </el-col>
                <el-col :span="8">
                    <span>收款类型：</span>{{ detailData.collectionType == '1' ? '销售货款' : detailData.collectionType == '2' ? '销售退货' : detailData.collectionType == '3' ? '预收款' : '暂无'}}
                </el-col>
            </el-row>
            <el-row class="detail-item" v-if="detailData.collectionMethod == '1'">
                <el-col :span="8">
                    <span>收款银行：</span>{{ detailData.collectionBank ?  detailData.collectionBank : '暂无'}}
                </el-col>
                <el-col :span="8">
                    <span>收款账号：</span>{{ detailData.collectionAccount ?  detailData.collectionAccount : '暂无'}}
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="8">
                    <span>销售订单编号：</span>{{ detailData.salesOrderCode ?  detailData.salesOrderCode : '暂无'}}
                </el-col>
                <el-col :span="8">
                    <span>订单金额：</span>{{ detailData.oderMoney ?  detailData.oderMoney : '暂无'}}
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="8">
                    <span>待收金额：</span>{{ detailData.pendingPayment ?  detailData.pendingPayment : '暂无'}}
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="8">
                    <span>已收金额（元）：</span>
                    <template v-if="detailData.status !== '2'">
                        <el-input v-model="detailData.money" placeholder="" @input="inputMoney" />
                    </template>
                    <template v-else>
                        {{ detailData.money ?  detailData.money : '暂无'}}
                    </template>
                </el-col>
                <el-col :span="8">
                    <span>金额大写：</span>{{ detailData.amountOfCapital ?  detailData.amountOfCapital : '暂无'}}
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="8">
                    <span>备注：</span>{{ detailData.remark ?  detailData.remark : '暂无'}}
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import { billsReceiptDetail, billsReceiptAudit, billsReceiptSplitBill } from "@/api/system/billsReceipt/billsReceipt"
export default {
    name: "detail",
    data() {
        return {
            id: '',
            detailData: ''
        }
    },
    created() {
        this.id = this.$route.query.id
        this.getDetail()
    },
    methods: {
        // 获取详细信息
        getDetail(){
            billsReceiptDetail(this.$route.query.id).then(res => {
                if(res.code == 200){
                    if(res.data.money == 0){
                        res.data.money = ''
                    }
                    this.detailData = res.data
                }
            })
        },
        // 编辑
        // edit(){
        //     this.$tab.closeOpenPage({ path: "/billsReceipt/edit", query:{ id: this.id } })
        // },
        // 金额验证
        inputMoney(e){
            if(/^(([1-9]{1}\d*)|(0{1}))((.\d{0,2})?)$/.test(e) == false){
                this.$modal.msgError('请输入正确的已收金额！')
                this.detailData.money = ''
                this.detailData.amountOfCapital = ''
                return false
            }else{
                if(e == '0'){
                    this.$modal.msgError('已收金额必须大于0!')
                    this.detailData.money = ''
                    this.detailData.amountOfCapital = ''
                }else{
                    // 金额转换大写
                    this.detailData.amountOfCapital = this.numberToChinese(e)
                }
            }
        },
        // 确认收款
        confirm(){
            if(this.detailData.money == ''){
                this.$modal.msgError('已收金额不能为空，请编辑！')
            }else{
                billsReceiptAudit({collectionId: this.id, status: '2', money: this.detailData.money, amountOfCapital: this.detailData.amountOfCapital}).then(res => {
                    if(res.code == 200){
                        if(Number(this.detailData.money) < this.detailData.pendingPayment){
                            this.$modal.confirm('是否拆单？', '拆单').then(() => {
                                // 拆单
                                billsReceiptSplitBill(this.id).then(res => {
                                    if(res.code == 200){
                                        this.$modal.msgSuccess("操作成功")
                                        this.$tab.closeOpenPage({ path: "/receiptAndPayment/billsReceipt/list" })
                                    }
                                })
                            }).catch(action => {
                                if(action == 'cancel'){
                                    this.$modal.msgSuccess("操作成功")
                                    this.$tab.closeOpenPage({ path: "/receiptAndPayment/billsReceipt/list" })
                                }
                            })
                        }else{
                            this.$modal.msgSuccess("操作成功")
                            this.$tab.closeOpenPage({ path: "/receiptAndPayment/billsReceipt/list" })
                        }
                    }
                })
            }
        },
        // 撤销收款
        // cancel(){
        //     billsReceiptAudit({collectionId: this.id, status: '1'}).then(res => {
        //         if(res.code == 200){
        //             this.$modal.msgSuccess("操作成功")
        //             this.$tab.closeOpenPage({ path: "/billsReceipt/list" })
        //         }
        //     })
        // }
    }
}
</script>
